<template>
  <el-form ref="form" :model="form">
    <div
      v-for="(item, index) in form.waringRuleBoList"
      :id="index"
      :key="index"
      class="rule-item"
      :class="{ active: !item.expanded }"
    >
      <div class="header">
        <el-button type="text" @click="item.expanded = !item.expanded">
          <i class="el-icon-arrow-down" :class="{ active: !item.expanded }"></i>
          <span class="condition-title">规则{{ ['一', '二', '三'][index] }}</span>
        </el-button>
        <div class="flex flex-mid">
          <el-form-item
            label="结果定义"
            label-width="80px"
            :prop="'waringRuleBoList.' + index + '.warningLevel'"
            :rules="{
              required: true,
              message: '不能为空',
              trigger: ['change', 'blur'],
            }"
          >
            <el-select v-model="item.warningLevel" placeholder="请选择" size="small" :disabled="disabled">
              <el-option label="一级预警" value="一级预警" />
              <el-option label="二级预警" value="二级预警" />
              <el-option label="三级预警" value="三级预警" />
            </el-select>
          </el-form-item>
          <el-button
            v-if="form.waringRuleBoList.length > 1 && !disabled"
            type="text"
            style="margin-left: 5px"
            @click="delCondition(index)"
          >
            <i class="el-icon-delete"></i>
            删除
          </el-button>
        </div>
      </div>
      <div v-for="(item1, index1) in item.waringRuleAndBoList" :key="index1" style="padding-bottom: 20px">
        <div class="item" style="padding: 0">
          <div class="tag">与</div>
          <div class="line"></div>
          <div>
            <div v-for="(item2, index2) in item1.waringRuleOrBoList" :key="index2" class="item">
              <div class="tag">或</div>
              <div class="line sub-line"></div>
              <el-row :gutter="16" style="width: ">
                <el-col :span="5">
                  <el-form-item
                    :prop="
                      'waringRuleBoList.' +
                      index +
                      '.waringRuleAndBoList.' +
                      index1 +
                      '.waringRuleOrBoList.' +
                      index2 +
                      '.leftRuleType'
                    "
                    :rules="{
                      required: true,
                      message: '不能为空',
                      trigger: ['change', 'blur'],
                    }"
                  >
                    <el-select
                      v-model="item2.leftRuleType"
                      placeholder="请选择规则类型"
                      size="small"
                      :disabled="disabled"
                      @change="item2.leftRuleValue = ''"
                    >
                      <el-option
                        v-for="option in leftRuleTypeOption"
                        :key="option.value"
                        :label="option.label"
                        :value="option.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item
                    :prop="
                      'waringRuleBoList.' +
                      index +
                      '.waringRuleAndBoList.' +
                      index1 +
                      '.waringRuleOrBoList.' +
                      index2 +
                      '.leftRuleValue'
                    "
                    :rules="{
                      required: true,
                      message: '不能为空',
                      trigger: ['change', 'blur'],
                    }"
                  >
                    <avue-input-tree
                      v-if="item2.leftRuleType === 'target'"
                      v-model="item2.leftRuleValue"
                      check-strictly
                      default-expand-all
                      placeholder="请选择目标"
                      :dic="targetList"
                      :props="{ label: 'name', value: 'id' }"
                      :disabled="disabled"
                      size="small"
                    ></avue-input-tree>
                    <el-select
                      v-else
                      v-model="item2.leftRuleValue"
                      placeholder="请选择指标"
                      size="small"
                      :disabled="disabled"
                    >
                      <el-option
                        v-for="option in indexList"
                        :key="option.id"
                        :label="option.name"
                        :value="option.matrixId"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item
                    :prop="
                      'waringRuleBoList.' +
                      index +
                      '.waringRuleAndBoList.' +
                      index1 +
                      '.waringRuleOrBoList.' +
                      index2 +
                      '.compare'
                    "
                    :rules="{
                      required: true,
                      message: '不能为空',
                      trigger: ['change', 'blur'],
                    }"
                  >
                    <el-select v-model="item2.compare" placeholder="请选择" size="small" :disabled="disabled">
                      <el-option
                        v-for="option in compareList"
                        :key="option.value"
                        :label="option.label"
                        :value="option.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item
                    :prop="
                      'waringRuleBoList.' +
                      index +
                      '.waringRuleAndBoList.' +
                      index1 +
                      '.waringRuleOrBoList.' +
                      index2 +
                      '.rightRuleType'
                    "
                    :rules="{
                      required: true,
                      message: '不能为空',
                      trigger: ['change', 'blur'],
                    }"
                  >
                    <el-select
                      v-model="item2.rightRuleType"
                      placeholder="请选择"
                      size="small"
                      :disabled="disabled"
                      @change="item2.rightRuleValue = ''"
                    >
                      <el-option
                        v-for="option in rightRuleTypeOption"
                        :key="option.value"
                        :label="option.label"
                        :value="option.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item
                    :prop="
                      'waringRuleBoList.' +
                      index +
                      '.waringRuleAndBoList.' +
                      index1 +
                      '.waringRuleOrBoList.' +
                      index2 +
                      '.rightRuleValue'
                    "
                    :rules="{
                      required: true,
                      message: '不能为空',
                      trigger: ['change', 'blur'],
                    }"
                  >
                    <avue-input-tree
                      v-if="item2.rightRuleType === 'target'"
                      v-model="item2.rightRuleValue"
                      check-strictly
                      default-expand-all
                      placeholder="请选择目标"
                      :dic="targetList"
                      :props="{ label: 'name', value: 'id' }"
                      :disabled="disabled"
                      size="small"
                    ></avue-input-tree>
                    <el-select
                      v-else-if="item2.rightRuleType === 'matrix'"
                      v-model="item2.rightRuleValue"
                      placeholder="请选择指标"
                      size="small"
                      :disabled="disabled"
                    >
                      <el-option
                        v-for="option in indexList"
                        :key="option.id"
                        :label="option.name"
                        :value="option.matrixId"
                      />
                    </el-select>
                    <el-input v-else v-model="item2.rightRuleValue" size="small" :disabled="disabled"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <div
                v-if="!disabled"
                class="tag or-btn"
                style="margin-left: 16px"
                @click="addOrRule(index, index1, index2)"
              >
                或
              </div>
              <div
                v-if="
                  index2 === item1.waringRuleOrBoList.length - 1 &&
                  index1 === item.waringRuleAndBoList.length - 1 &&
                  !disabled
                "
                class="tag and-btn"
                style="margin-left: 16px"
                @click="addAndRule(index, index1, index2)"
              >
                与
              </div>
              <el-button
                v-if="(item.waringRuleAndBoList.length > 1 || item1.waringRuleOrBoList.length > 1) && !disabled"
                type="text"
                style="margin-left: 16px"
                @click="delOrRule(index, index1, index2)"
              >
                <i class="el-icon-delete" style="font-size: 16px"></i>
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-button
      v-if="form.waringRuleBoList.length < 3 && !disabled"
      style="width: 100%; height: 50px"
      icon="el-icon-plus"
      size="medium"
      type="primary"
      plain
      @click="addCondition"
      >新增条件</el-button
    >
  </el-form>
</template>
<script>
import { list as targetList } from '@/api/target/target'
import { requestMatrixViewList } from '@/api/panel/view'
export default {
  name: 'RuleList',
  props: {
    userList: {
      type: Array,
      default: () => [],
    },
    userLabel: {
      type: String,
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      form: {
        waringRuleBoList: [
          {
            waringRuleAndBoList: [
              {
                waringRuleOrBoList: [
                  {
                    compare: '',
                    leftRuleType: '',
                    leftRuleValue: '',
                    rightRuleType: '',
                    rightRuleValue: '',
                  },
                ],
              },
            ],
            warningRuleName: '',
            warningLevel: '',
            expanded: true,
            userIds: [],
          },
        ],
      },
      leftRuleTypeOption: [
        { label: '指标', value: 'matrix' },
        { label: '目标', value: 'target' },
      ],
      targetList: [],
      indexList: [],
      compareList: [
        { label: '大于', value: '>' },
        { label: '小于', value: '<' },
        { label: '等于', value: '=' },
        { label: '不等于', value: '!=' },
        { label: '大于等于', value: '>=' },
        { label: '小于等于', value: '<=' },
      ],
      rightRuleTypeOption: [
        { label: '指标', value: 'matrix' },
        { label: '目标', value: 'target' },
        { label: '常量', value: 'constant' },
      ],
    }
  },
  created() {
    this.getTargetList()
    this.getIndexList()
  },
  methods: {
    //新增规则
    addOrRule(index, index1, index2) {
      let list = this.form.waringRuleBoList[index].waringRuleAndBoList[index1].waringRuleOrBoList
      list.splice(index2 + 1, 0, {
        compare: '',
        leftRuleType: '',
        leftRuleValue: '',
        rightRuleType: '',
        rightRuleValue: '',
      })
    },
    //新增并联规则
    addAndRule(index, index1, index2) {
      let list = this.form.waringRuleBoList[index].waringRuleAndBoList
      list.push({
        waringRuleOrBoList: [
          {
            compare: '',
            leftRuleType: '',
            leftRuleValue: '',
            rightRuleType: '',
            rightRuleValue: '',
          },
        ],
      })
    },
    //删除规则
    delOrRule(index, index1, index2) {
      if (this.form.waringRuleBoList[index].waringRuleAndBoList[index1].waringRuleOrBoList.length === 1) {
        this.form.waringRuleBoList[index].waringRuleAndBoList.splice(index1, 1)
        return
      }
      let list = this.form.waringRuleBoList[index].waringRuleAndBoList[index1].waringRuleOrBoList
      list.splice(index2, 1)
    },
    //添加条件
    addCondition() {
      this.form.waringRuleBoList.push({
        waringRuleAndBoList: [
          {
            waringRuleOrBoList: [
              {
                compare: '',
                leftRuleType: '',
                leftRuleValue: '',
                rightRuleType: '',
                rightRuleValue: '',
              },
            ],
          },
        ],
        warningRuleName: '',
        warningLevel: '',
        expanded: true,
        userIds: [],
      })
      let list = JSON.parse(JSON.stringify(this.userList))
      list.push([])
      this.$emit('update:userList', list)
      this.$emit('update:userLabel', '规则一')
    },
    //删除条件
    delCondition(index) {
      this.form.waringRuleBoList.splice(index, 1)
      let list = JSON.parse(JSON.stringify(this.userList))
      list.splice(index, 1)
      this.$emit('update:userList', list)
      this.$emit('update:userLabel', '规则一')
    },
    //获取目标列表
    getTargetList() {
      targetList({ targetType: '0' }).then((res) => {
        this.targetList = res.data
      })
    },
    //获取指标列表
    getIndexList() {
      requestMatrixViewList({}).then((res) => {
        this.indexList = res.data
      })
    },
    validate() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate((valid) => {
          if (valid) {
            let params = JSON.parse(JSON.stringify(this.form))
            for (let index in params.waringRuleBoList) {
              if (!this.userList[index] || !this.userList[index].length) {
                this.$message.error('对应规则的推送人不能为空')
                reject('请检查参数')
              }
              let val = params.waringRuleBoList[index]
              val.warningRuleName = ['规则一', '规则二', '规则三'][index]
              delete val.expanded
              val.userIds = this.userList[index]
            }
            resolve(params)
          } else reject('请检查参数')
        })
      })
    },
    init(data) {
      if (data && data.length) {
        this.form = {
          waringRuleBoList: data.map((item) => ({ ...item, expanded: true })),
        }
        this.$emit(
          'update:userList',
          data.map((item) => item.userIds)
        )
        this.$emit('update:userLabel', '规则一')
      } else {
        this.form = {
          waringRuleBoList: [
            {
              waringRuleAndBoList: [
                {
                  waringRuleOrBoList: [
                    {
                      compare: '',
                      leftRuleType: '',
                      leftRuleValue: '',
                      rightRuleType: '',
                      rightRuleValue: '',
                    },
                  ],
                },
              ],
              warningRuleName: '',
              warningLevel: '',
              expanded: true,
              userIds: [],
            },
          ],
        }
        this.$emit('update:userList', [[]])
        this.$emit('update:userLabel', '规则一')
      }
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep {
  .rule-item {
    padding: 0 16px;
    border-radius: 5px;
    border: 1px solid;
    border: 1px solid var(--primary-color);
    margin-bottom: 16px;
    transition: 0.3s all;
    max-height: 1000px;
    overflow: hidden;

    .header {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .condition-title {
        font-size: 16px;
        color: rgba(0, 0, 0, 0.85);
        font-weight: bold;
      }

      // .el-select .el-input__inner {
      //   border-color: transparent;
      // }

      .el-select:hover .el-input__inner {
        border-color: var(--primary-color);
      }

      .el-icon-arrow-down {
        width: 18px;
        height: 18px;
        line-height: 18px;
        border-radius: 3px;
        margin-right: 5px;
        color: #fff;
        background-color: var(--primary-color);
        transition: 0.3s all;
      }

      .el-icon-arrow-down.active {
        transform: rotate(-90deg);
      }
    }

    .item {
      display: flex;
      align-items: stretch;
      padding: 8px 0;

      .tag {
        width: 18px;
        height: 18px;
        background-color: rgba(0, 0, 0, 0.25);
        border-radius: 4px;
        line-height: 18px;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.45);
        text-align: center;
        align-self: center;
        flex-shrink: 0;
      }

      .or-btn {
        background-color: rgba(16, 193, 36, 0.1);
        color: rgba(16, 193, 36, 1);
        cursor: pointer;
      }

      .or-btn:hover {
        background-color: rgba(16, 193, 36, 1);
        color: #fff;
      }

      .and-btn {
        background-color: rgba(72, 121, 255, 0.1);
        color: rgba(72, 121, 255, 1);
        cursor: pointer;
      }

      .and-btn:hover {
        background-color: rgba(72, 121, 255, 1);
        color: #fff;
      }

      .line {
        width: 3px;
        background: rgba(72, 121, 255, 0.3);
        margin: 4px 12px;
        flex-shrink: 0;
      }

      .sub-line {
        background-color: rgba(16, 193, 36, 0.4);
        margin: -4px 12px;
      }
    }
  }

  .rule-item.active {
    max-height: 40px;
  }
}

.flex {
  display: flex;
}

.flex-mid {
  align-items: center;
}
</style>
